<template>
  <!-- 1是充值排行,2是盈利排行,3佣金排行,4投注排行 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="rankDataList" @query="getRankList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="渠道:" label-width="50px">
            <el-select class="width240" v-model="listQuery.agent_id" placeholder="请选择渠道" filterable >
              <el-option label="全部" value="" ></el-option>
              <el-option :label="'【'+item.value+'】'+item.label" :value="item.value" v-for="(item, index) in channelData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="日期时间:" label-width="80px">
            <el-date-picker is-range v-model="listQuery.dateTime" type="date" 
            class="full-width-input time-box" :clearable="false"></el-date-picker>
          </el-form-item> -->
        </template>
        <template v-slot:actions>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getRankList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" type="index" label="排名" width="80" />
          <el-table-column align="center" prop="user_id" label="用户ID" width="100" />
          <el-table-column align="center" label="玩家昵称" width="150" >
            <template slot-scope="scope">
              <span class="item_details" @click="getUserInfo(scope.row)">{{ scope.row.nick_name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="nick_name" label="手机号" width="150" />
          <el-table-column align="center" prop="agent_name" label="注册渠道" width="150" />
          <el-table-column align="center" prop="recharge_money" label="充值金额" />
          <el-table-column align="center" prop="withdrawal_money" label="提现金额" />
          <el-table-column align="center" label="充提差额">
            <template slot-scope="scope">
              <span :class="scope.row.pay_income>0?'colorGre':scope.row.pay_income<0?'colorRed':''">{{ scope.row.pay_income }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="game_bet" label="有效投注" width="150" />
          <el-table-column align="center" prop="game_income" label="玩家盈利金额">
            <template slot-scope="scope">
              <span :class="scope.row.game_income>0?'colorGre':scope.row.game_income<0?'colorRed':''">{{ scope.row.game_income }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="commission" label="获得佣金" />
        </template>
        <template v-slot:footer></template>
      </search-table>
    </div>
    <page-details :show="showDetails" :data="checkedItem" @onHideDetails="onHideDetails" />
  </div>
</template>
  
<script>
  import { 
    getRank
  } from "@/api/statistics";
  import SearchTable from "@/components/SearchTable";
  import PageDetails from '../../userManage/user/page-details'
  export default {
    name: "ranking",
    components: {
      SearchTable,
      PageDetails
    },
    data () {
      return {
        rankDataList: [],
        channelData:this.$store.state.commonState.channelDataArray,
        listLoading: false,
        currentTotal:0,
        listQuery:{
          agent_id:this.$store.state.commonState.channelDataArray[0].value,
          dateTime:this.$public.getDateDay(0),
          start_time:'',
          end_time:'',
          type:this.$route.meta.type
        },
        showDetails:false,
        checkedItem:{}
      };
    },
    created () {},
    activated(){
      this.channelData=this.$store.state.commonState.channelDataArray
      this.getRankList();
    },
    methods: {
      // 充值排行
      async getRankList (query) {
        let that = this,params=that.listQuery;
        that.rankDataList = [];
        that.listLoading = true;
        if (params.dateTime) {
          params.start_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 00:00:00'
          params.end_time = that.$public.standardDate(params.dateTime).substr(0,10)+' 23:59:59'
        }else{
          params.start_time = ''
          params.end_time = ''
        }
        const response = await getRank(params)
        if(response.code==1){
          if (response.data) {
            response.data.map(item=>{
              item.recharge_money=that.$public.mathNumberDivideWan(item.recharge_money)
              item.withdrawal_money=that.$public.mathNumberDivideWan(item.withdrawal_money)
              item.pay_income=that.$public.mathNumberDivideWan(item.pay_income)
              item.game_income=that.$public.mathNumberDivideWan(item.game_income)
              item.commission=that.$public.mathNumberDivideWan(item.commission)
              item.game_bet=that.$public.mathNumberDivideWan(item.game_bet)
            })
            that.rankDataList = response.data
          }
        }else{
          that.$message.error(response.msg)
        }
        that.listLoading = false;
      },
      // 点击获取个人信息
      getUserInfo (row) {
        this.showDetails = true
        this.checkedItem = row
      },
      onHideDetails () {
        this.showDetails = false;
      },
      // 刷新
      refresh() {
        this.listQuery={
          agent_id:this.channelData[0].value,
          dateTime:this.$public.getDateDay(0),
          start_time:'',
          end_time:'',
          type:this.$route.meta.type
        },
        this.getRankList();
      },
    },
  };
</script>
<style lang="scss" scoped>

</style>